var xhr = new XMLHttpRequest();
xhr.open("GET", "../coffee.php?hide=getproduct");
xhr.send(null);
xhr.onreadystatechange = () => {
    if (xhr.status == 200 && xhr.readyState == 4) {
        var arr = JSON.parse(xhr.responseText);
        console.log(arr);
        var boximgs = document.querySelectorAll("section main .bottom .pic>img");
        var chs = document.querySelectorAll("section main .top .tlfet .title .ch");
        var ens = document.querySelectorAll("section main .top .tlfet .title .en");
        var boxcontents = document.querySelectorAll("section main .bottom .content");
        console.log(ens)
        arr.forEach((v, i) => {
            console.log(v,i)
            for (var j in v) {
                if (j == "src_product") {
                    boximgs[i].src = v[j];
                } else if (j == "name") {
                    chs[i].innerHTML = v[j];
                }else if (j == "details") {
                    var arr=v[j].split("&*&");
                    arr.forEach(v=>{
                        var p=document.createElement("p");
                        p.innerHTML=v;
                        boxcontents[i].appendChild(p);
                    })
                }else if(j == "en_name"){
                    ens[i].innerHTML = v[j];
                }
            }
        })
        s3.innerHTML=chs[0].innerHTML;
    }
}



var titles=document.querySelectorAll(".top .title");
var bottoms=document.querySelectorAll(".bottom");
var s3=document.querySelector(".s3");
var banner=document.querySelector(".banner");
var chs=document.getElementsByClassName("ch");
titles.forEach((v,i)=>{
    v.onclick=function(){
    s3.innerHTML=this.firstElementChild.innerHTML;
    bottoms.forEach((val,j)=>{
        val.className="bottom";
        chs[j].className="ch";
    })
    bottoms[i].className="bottom active";
    banner.style.backgroundImage="url(../images/product/"+this.firstElementChild.innerHTML+".png)";
    chs[i].className="ch chactive";
}
})